<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <h1 id="h1">{{msg}}</h1>
    <input type="text" v-model="msg"/>

    <table>
        <tr>
            <th>患者ID</th>
            <th>患者姓名</th>
            <th>患者年龄</th>
        </tr>
        <tr v-for="patient in patientList">
            <td>{{patient.patientId}}</td>
            <td>{{patient.patientName}}</td>
            <td>{{patient.patientAge}}</td>
        </tr>

    </table>
</div>
</body>
</html>

<script src="/js/axios.min.js"></script>
<script src="../js/v2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg:"vue的生命周期",
            patientList: null
        },
        methods: {
        },
        computed: {
        },
        //初始化阶段
        beforeCreate(){//第一个生命周期函数   仅完成自身内部事件和生命周期函数注入
            console.log("beforeCreate",this.msg)
        },
        created(){//第二个生命周期函数       完成自身内部事件和生命周期函数注入，包括自定义data,methods,computed等属性注入和校验工作
            console.log("created",this.msg)
            var http = axios.create({
                baseURL:"http://127.0.0.1:5000",
                timeout: 4000
            });
            var _this = this;
            http.get("/test?id=1").then(function (resp){
                console.log(resp.data);
                _this.patientList = resp.data;
            }).catch((err)=>{//function可以省略  ()=>{}
                console.log(err)
            })

        },
        beforeMount(){//第三个         el执行html还是一个原始模板，并没有完成数据渲染工作
            console.log(document.getElementById("h1").innerText);
        },
        mounted(){//第四个     完成数据渲染
            console.log(document.getElementById("h1").innerText);
        },
        //运行阶段
        beforeUpdate(){//data数据发生变化，此时页面数据还是原始数据
            console.log("beforeUpdate",this.msg)
            console.log("beforeUpdate view",document.getElementById("h1").innerText);
        },
        updated(){//运行阶段第二个函数       data数据页面保持一致
            console.log("beforeUpdate",this.msg)
            console.log("beforeUpdate view",document.getElementById("h1").innerText);
        },
        //销毁阶段
        beforeDestroy(){//销毁时第一个函数  vue实例刚刚开始销毁
            console.log("beforeDestroy开始销毁")
        },
        destroyed(){
            console.log("beforeDestroy完成销毁")
        }
    })
</script>